<template>
  <div class="nava">
    <div class="nava-img">
      <img src="../Interaction/项目图片/登录和注册/登录页04-灰猫.png" alt="" />
    </div>
  </div>

  <div class="in">
    <h1>登录</h1>
    <div>
      <img
        class="zhua"
        src="../Interaction/项目图片/登录和注册/登录和注册-爪子.png"
        alt=""
      />
    </div>
    <div class="inde">
      <div>
        <h4>请输入手机号</h4>
        <input type="text" v-model="fromData.userPhone" />
      </div>
      <div>
        <h4>密码</h4>
        <input type="password" v-model="fromData.password" />
      </div>
    </div>

    <div class="bu">
      <button class="dengl" @click="gohome">登录</button>
    </div>

    <div class="tiaozhuan" @click="goregist">没有账号？点击注册</div>
  </div>
</template>

<script>
import { login } from "@/api/login";
import { useRouter } from "vue-router";
import { ElMessage } from "element-plus";
import { reactive } from "vue";
// import router from '@/router'
export default {
  name: "IndexLogin", //登录
  setup() {
    let router = useRouter();

    let fromData = reactive({
      password: "",
      userPhone: "",
      userId:26
    });

    function gohome() {
      login(fromData.userPhone, fromData.password)
        .then((res) => {
          console.log(res);
          if (res.sc == "登录成功") {
            ElMessage({
              message: "登录成功",
              type: "success",
            });
            sessionStorage.setItem('userId', res.userId)
            router.push({
              name: "home",
            });
          } else {
            ElMessage({
              message: "登录失败",
              type: "error",
            });
          }
        })
        .catch(() => {});
    }

    function goregist() {
      router.push({
        name: "regist",
      });
    }

    return {
      gohome,
      goregist,
      fromData,
    };
  },
};
</script>

<style scoped>
.nava {
  width: 100%;
  height: 18rem;
  z-index: -1;
  background-color: #878ecd;
}
.nava-img {
  width: 8rem;
  height: 8rem;
  position: absolute;
  margin-top: 7rem;
}
.nava-img img {
  width: 8rem;
  height: 8rem;
}
.in {
  height: 30.6rem;
  border: 1px solid rgb(84, 83, 83);
  border-top-left-radius: 2rem;
  border-top-right-radius: 2rem;
  margin-top: -2.625rem;
  background-color: white;
}
h1 {
  height: 2rem;
  display: flex;
  margin-top: 0.3rem;
  margin-left: 1.1rem;
  color: rgb(118, 121, 121);
}
.inde {
  height: 11rem;
  margin-top: 2.1rem;
}
.inde > div {
  height: 4.6rem;
  margin-left: 1.1rem;
  margin-top: 1.9375rem;
  color: rgb(118, 121, 121);
}
input {
  width: 14.5rem;
  height: 2.7rem;
  border: 1px solid gray;
  border-radius: 0.5rem;
}
.zhua {
  width: 10rem;
  height: 10rem;
  position: absolute;
  margin-left: 13rem;
  margin-top: 0.2rem;
}
.bu {
  width: 100%;
  height: 5rem;
  margin-top: 2rem;
  /* background-color: blue; */
}
.dengl {
  width: 13.5rem;
  height: 3rem;
  margin-left: 5rem;
  margin-top: 3.4rem;
  border: 0;
  border-radius: 0.4rem;
  background-color: rgb(236, 236, 97);
  color: white;
}
.tiaozhuan {
  margin-top: 4.25rem;
  margin-left: 7.25rem;
}
</style>